import React, { Component } from 'react';
import { Popup, Toast, Pagination, Icon } from 'antd-mobile';
import BookSetting from './sub/bookSetting.js';
import BookSettingBackground from './sub/bookSettingBackground.js';
import BookSettingFont from './sub/bookSettingFont.js';
import BookCatalogList from './sub/bookCatalogList.js';
import * as bookinfoApi from 'common/api/bookinfo.js';
import './bookRead.less';

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let maskProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  maskProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

class BookRead extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	bookName: '章节标题',
	    	chapterContent: '',
	    	chapterList: [],
	    	chapterSize: 0,
	    	currentChapterNum: 0,
	    	toolsVisible: true,
	    	fontSize: '0.28rem',
	    	background: '#fff',
	    	fontColor: '#444',
	    	selectBackgroundIndex: 0,
	    	backgroundArrays: [
				'#fff', '#F8F3DF', '#C4DFCE', '#212028'
			]
	    }
	}

	componentDidMount(){
		var _this= this;
		Toast.loading();

		//获取书籍目录
		bookinfoApi.bookChapterList({
			id: this.props.params.id
		}).then(chapterListResult => {
			//获取书籍第一章内容
			bookinfoApi.bookChapterContent({
				link: chapterListResult.data.chapters[0].link
			}).then(chapterContentResult => {
				setTimeout(function(){
					Toast.hide();
					_this.setState({
						chapterSize: chapterListResult.data.chapters.length,
						bookName: chapterContentResult.data.chapter.title,
						chapterContent: chapterContentResult.data.chapter.cpContent,
						chapterList: chapterListResult.data.chapters
					})
				}, 500);
			})
		})
	}
	
	//左上角返回事件
	backHandle = () => {
		window.history.back();
	}
	
	setting = () => {
		this.setState({
			toolsVisible: !this.state.toolsVisible
		})
	}
	
	//显示目录列表
	showCatalogList = () => {
		this.setState({
			toolsVisible: false
		})
		Popup.show(<BookCatalogList chapterList={this.state.chapterList} onSelectChapter={this.onSelectChapter}></BookCatalogList>, { animationType: 'slide-up', maskProps, maskClosable: true });
	}

	bookSettingBackground = () => {
		this.setState({
			toolsVisible: false
		})
		Popup.show(<BookSettingBackground 
			onChangeBackground={this.onChangeBackground} 
			backgroundArrays={this.state.backgroundArrays}
			selectBackgroundIndex={this.state.selectBackgroundIndex}>
			</BookSettingBackground>, { animationType: 'slide-up', maskProps, maskClosable: true });
	}
	
	//基本设置
	bookSetting = () => {
		this.setState({
			toolsVisible: false
		})
		Popup.show(<BookSetting></BookSetting>, { animationType: 'slide-up', maskProps, maskClosable: true });
	}
	
	//设置字体
	bookSettingFont = () => {
		this.setState({
			toolsVisible: false
		})
		Popup.show(<BookSettingFont onChangeFont={this.onChangeFont} fontSize={this.state.fontSize}></BookSettingFont>, { animationType: 'slide-up', maskProps, maskClosable: true });
	}

	onSelectChapter = (index) => {
		Popup.hide();
		var _this= this;
		Toast.loading();

		//获取书籍章节内容
		bookinfoApi.bookChapterContent({
			link: this.state.chapterList[index].link
		}).then(chapterContentResult => {
			setTimeout(function(){
				Toast.hide();
				_this.setState({
					currentChapterNum: index,
					bookName: chapterContentResult.data.chapter.title,
					chapterContent: chapterContentResult.data.chapter.cpContent
				})
				window.scrollTo(0,0);
			}, 500);
		})
	}

	onChangeBackground = (index) => {
		if(index == 3){
			this.setState({
				selectBackgroundIndex: index,
				background: this.state.backgroundArrays[index],
				fontColor: '#fff'
			})
		}else{
			this.setState({
				selectBackgroundIndex: index,
				background: this.state.backgroundArrays[index],
				fontColor: '#444'
			})
		}
	}

	onChangeFont = (val) => {
		this.setState({
			fontSize: val+'rem'
		})
	}

	onChangeChapter = (index) => {
		Popup.hide();
		this.onSelectChapter(index);
	}

	componentWillUnmount(){
		Popup.hide();
	}
	
	render(){
		return(
			<div className="bookRead">
				{
					this.state.toolsVisible && 
					<div className="bookReadSetting">
						<div className="bookReadBack">
							<div className="bookReadBack_left fl">
								<img src="assets/img/back.png" onClick={this.backHandle}/>
							</div>
							<div className="bookReadBack_content">{this.state.bookName}</div>  
						</div>
						<ul className="bookReadTools">
							<li onClick={this.showCatalogList}>
								<img src="assets/img/read_tools_catalog.png"/>
							</li>
							<li onClick={this.bookSettingBackground}>
								<span>阅读背景</span>
							</li>
							<li onClick={this.bookSettingFont}>
								<img src="assets/img/read_tools_aa.png"/>
							</li>
							<li>
								<img src="assets/img/read_tools_setting.png"/>
							</li>
						</ul>
					</div>
				}
				<div className="bookReadBox" onClick={this.setting}></div>
				<div className="bookReadContent" style={{color: this.state.fontColor,fontSize: this.state.fontSize, background: this.state.background}}>
					{this.state.chapterContent}
					<Pagination total={this.state.chapterSize}
				      className="custom-pagination-with-icon"
				      current={this.state.currentChapterNum}
				      onChange={this.onChangeChapter}
				      locale={{
				        prevText: (<span className="arrow-align"><Icon type="left" />上一章</span>),
				        nextText: (<span className="arrow-align">下一章<Icon type="right" /></span>),
				      }}
				    />
				</div>
			</div>
		)
	}
}

export default BookRead;